<template>
	<view class="work-my-took-page page">
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="我接的活"></CustomNav>
		<view class="tab-block block" :style="'margin-top:'+mt">
			<view class="tab-item" :class="type==item.id?'selected':''" @click="type=item.id" v-for="item in tabList"
				:key="item.id">
				<view class="tab-name">{{item.name}}</view>
				<view class="line"></view>
			</view>
		</view>
		<scroll-view :scroll-y="true" :scroll-top="scrollTop" :enable-back-to-top="true" :show-scrollbar="true"
			:enable-flex="true" class="list-block block" :style="'height:calc(100vh - '+mt+' - 40rpx - 66rpx)'"
			@scrolltolower="changePage">
			<template v-if="list.length>0">
				<WorkItem :detail="item.work" :is_employed="item.is_employed" v-for="item in list" :key="item.id">
				</WorkItem>
			</template>
			<template v-if="list.length==0&&!more">
				<view class="empty">暂无数据</view>
			</template>
			<template v-if="list.length>0&&!more">
				<view class="empty">没有更多了</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {
		robWorkList
	} from '@/api/work.js'
	import WorkItem from '@/page_market/components/WorkItem/WorkItem'
	// import {isMore} from '@/util/util.js'
	export default {
		components: {
			WorkItem
		},
		data() {
			return {
				tabList: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '已申请'
					},
					{
						id: 2,
						name: '待开工'
					},
					{
						id: 3,
						name: '已完工'
					},
				],
				type: 0,
				topBgColor: 'rgba(0,0,0,0)',
				page: 1,
				limit: 20,
				list: [],
				total: 0,
				more: true,
				scrollTop: 0,
			}
		},
		watch: {
			type() {
				this.reload();
			}
		},
		methods: {
			reload() {
				this.page = 1;
				this.getList(true)
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const position = this.$store.getters.position;
				let conf = {
					page: this.page,
					limit: this.limit,
					type: this.type
				};
				if (position) {
					conf.longitude = position.longitude;
					conf.latitude = position.latitude
				}
				robWorkList(conf).then(res => {
					console.log(refresh)
					if (refresh) {
						this.list = res.records;
					} else {
						this.list = [...this.list, ...res.records];
					}
					this.more = isMore(this.page, this.limit, res.total)
					this.total = res.total;
				})
			},
			changePage() {
				if (this.more) {
					this.page++;
					this.getList()
				}
			}
		},
		onLoad() {
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.work-my-took-page {
		overflow: hidden;
		background-image: $custom-background-gradient;
		background-repeat: no-repeat;



		.block {
			width: $content-width;
		}

		.tab-block {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.tab-item {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;

				.line {
					margin-top: 10rpx;
					height: 6px;
					width: 20px;
					border-radius: 12px;
					background: rgba(0, 0, 0, 0);
				}
			}

			.tab-item.selected {
				.tab-name {
					font-size: 34rpx;
					font-weight: bold;
				}

				.line {
					background: #fff;
				}
			}
		}

		.list-block {
			width: 100%;
			margin-top: 40rpx;
			background: #f8f8f8;
			border-radius: 20px 20px 0 0;
			padding: 30rpx;

			.list-item {
				background: #fff;
				border-radius: 12px;
				padding: 30rpx;
				margin-bottom: 30rpx;
				width: 100%;

				.name-block {
					width: 100%;
					display: flex;
					align-items: center;

					.valuation {
						width: 100rpx;
						border-radius: 4px;
						color: #fa9b17;
						background: #fcf2d8;
						font-size: 24rpx;
						padding: 2px 7px;
						margin-right: 20rpx;
					}

					.name {
						width: calc(100% - 220rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.process_status {
						color: #fa9b17;
					}
				}

				.time {
					margin-top: 30rpx;
					color: #757575;
					font-size: 28rpx;
				}

				.price {
					margin-top: 30rpx;
					color: #fa9b17;
					font-size: 24rpx;

					.number {
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>